<template>
	<view class="">
		<slot></slot>
		<up-popup :show="show" @close="close" :safeAreaInsetBottom="false">
			<view class="popup_box">
				<up-gap :height="navbarHeight/2" bgColor="transparent"></up-gap>
				<view class="title_box">
					<view class="fs-34">
						{{pickerTitle}}
					</view>
				</view>

				
				<view class="search_box">
					<up-search 
						v-model="keyword"
						bgColor="#fff"
						height="33"
						borderColor="#eee"
						searchIconSize="18"
						:placeholder="placeholder"
						clearabled animation
						:actionStyle="{
							color:'#000'
						}"
						@change="searchChange"
						@search="searchSearch"
						@custom="searchSearch"
						@clear="searchClear"></up-search>
				</view>


				<view class="result_list">
					<view class="my-20">
						{{pickerTitle2}}
					</view>
					<template v-if="list.length>0">
						<view @click="chooseItem(item)" :class="currentSchool.id == item.id?'check':''" class="result_item" v-for="(item,index) in list"
							:key="index">
							<view :class="currentSchool.id == item.id?'check':''" class="txt ml-20">
								{{item[keyName]}}
							</view>
							<view v-if="currentSchool.id == item.id" class="icon">
								<up-icon color="#fff" name="checkbox-mark" size="10"></up-icon>
							</view>
						</view>
					</template>

					<template v-else>
						<view class="no_result_list">
							暂无数据
							<!-- ，院校名称输入错误或该院校在福建没有招生计划 -->
						</view>
					</template>
				</view>

				<view class="btn_box fr-ac-jc mt-30">
					<view class="cancel btn" @click="cancel">
						取消
					</view>
					<view class="confirm btn" @click="confirm">
						确定
					</view>
				</view>
			</view>
		</up-popup>
	</view>


</template>

<script>
	import {
		debounce,
	} from '@/common/common'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	export default {
		data() {
			return {
				keyword:'',
				currentSchool:{}

			}
		},
		props: {
			//选择列表
			list: {
				default: [],
				type:Array
			},
			//是否显示
			show: {
				default: true,
				type:Boolean
			},
			//搜索标题
			pickerTitle: {
				default: '选择院校',
				type:String
			},
			//搜索二级标题
			pickerTitle2: {
				default: '请选择院校',
				type:String
			},
			//列表遍历时每一项读取的key名称
			keyName: {
				default: 'school',
				type:String
			},
			placeholder:{
				default: '输入关键字搜索院校',
				type:String
			}
		},
		computed: {
			navbarHeight(){
				return useAppStore().navbarHeight
			},
			publicStyles(){
				return useColorStore().publicStyles
			}
		},
		created() {
		},
		mounted() {},
		methods: {
			searchChange:debounce(function(e) {
				this.$emit('searchChange',e)
			}),
			searchSearch(e){
				this.$emit('searchSearch',e)
			},
			searchClear(e){
				this.$emit('searchClear',e)
			},
			close(){
				this.$emit('close')
			},
			cancel(){
				this.$emit('cancel')
			},
			confirm(){
				this.$emit('confirm',this.currentSchool)
			},
			chooseItem(item){
				this.currentSchool = item
			},
			init(){
				this.keyword = ''
			}
		}
	}
</script>

<style lang="scss">
	$theme-color:var(--color);
	.color {
		color: var(--color);
	}


	.popup_box {
		height: 100vh;
		width: 100%;
		position: relative;
		background-color: #fff;
		
		display: flex;
		flex-direction: column;
	  
		.title_box {
			position: relative;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx 0;
	  
	  
			.icon-close-bold {
				position: absolute;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);
				color: #888;
			}
		}
	  
		.search_box {
			margin: 20rpx 0;
			box-sizing: border-box;
			padding: 0 5vw;
		}
	  
		.result_list {
			box-sizing: border-box;
			padding: 0 4vw;
			height: 65%;
			overflow: scroll;
	  
			.result_item {
				min-height: 15px;
				transition: all 0.5s;
				margin-bottom: 20rpx;
				width: 100%;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #F4F4F4;
				border-radius: 10rpx;
				box-sizing: border-box;
				padding: 20rpx;
				border: 2rpx solid transparent;
				
				&.check{
					background-color: white;
					border: 2rpx solid var(--color);
				}
				
				
				.txt{
					color: var(--gray-3);
					
					&.check{
						color: var(--color);
					}
				}
				.icon{
					height: 15px;
					width: 15px;
					border-radius: 50%;
					background-color: var(--color);
					display: flex;
					justify-content: center;
					align-items: center;
				}
	  
			}
	  
			.history {
				margin-top: 10rpx;
			}
	  
			.history_list {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
	  
				.history_item {
					border-radius: 20rpx;
					background-color: #eee;
					height: 50rpx;
					line-height: 50rpx;
					padding: 10rpx 26rpx;
					color: #888;
					margin-right: 16rpx;
					margin-bottom: 16rpx;
				}
	  
				.history_more {
					margin-left: auto;
					height: 50rpx;
					width: 50rpx;
					border-radius: 50%;
					background-color: #eee;
					margin-bottom: 16rpx;
	  
					.iconfont {
						color: #888;
						font-size: 24rpx;
					}
				}
			}
			
			.no_result_list{
				box-sizing: border-box;
				padding: 100rpx;
				color: #888;
				text-align: center;
			}
		}
	  
		.btn_box {
			width: 100%;
	  
			.confirm {
				margin-left: 100rpx;
				background-color: $theme-color;
				color: white;
			}
	  
			.cancel {
				background-color: white;
				color: $theme-color;
			}
	  
			.btn {
				width: 240rpx;
				padding: 6rpx 0;
				border-radius: 10rpx;
				border: 2rpx solid $theme-color;
				font-size: 34rpx;
				text-align: center;
			}
		}
	}
</style>